<template>
	<view style="padding-bottom: 20rpx;">
		<image style="width: 100%;height: 340rpx;" src="../../static/images/bj.jpg" mode=""></image>
		<view style="text-align: center;">
			<image class="avatar" :src="helper.host+userInfo.avatar" mode=""></image>
		</view>
		<view class="p15" style="position: relative;bottom: 104rpx;">
			<view style="background: #ffffff;margin-top: 20rpx;border-radius: 20rpx;padding: 20rpx 0;">
				<view class="btitle">基本信息</view>
				<view class="top-card p15 f14">
					<view>姓名：<text style="color:#666">{{userInfo.nickname}}</text></view>
					<view>联系方式：<text style="color:#666">{{userInfo.mobile}}</text></view>
					<view>职称：<text style="color:#666">{{userInfo.zhicheng}}</text></view>
					<view>日常巡检区域：<text style="color:#666">{{userInfo.xj_quyu}}</text></view>
					<view>设备属性：<text style="color:#666">{{getDevice(userInfo.device)}}</text></view>
				</view>
			</view>
			<view style="background: #ffffff;margin-top: 20rpx;border-radius: 20rpx;padding: 20rpx 0;">
				<view class="btitle">工作内容</view>
				<view class="box" @click="tongzhi()">
					<image src="../../static/icon/77.png" mode="aspectFit" />
					</image>
					<view class="title">通知</view>
				</view>
				<view class="box" @click="xuncha">
					<image src="../../static/icon/22.png" mode="aspectFit" />
					</image>
					<view class="title">开始巡边</view>
				</view>
				<view class="box" @click="xc_jilu()">
					<image src="../../static/icon/44.png" mode="aspectFit" />
					</image>
					<view class="title">巡边记录</view>
				</view>
				<view class="box" @click="task()">
					<image src="../../static/icon/55.png" mode="aspectFit" />
					</image>
					<view class="title">临时任务</view>
				</view>
				<view class="box" @click="navigate('/pages/question/list')">
					<image src="../../static/icon/66.png" mode="aspectFit" />
					</image>
					<view class="title">问题管理</view>
				</view>
				<view class="box" @click="navigate('/pages/approval/approval')">
					<image src="../../static/icon/11.png" mode="aspectFit" />
					</image>
					<view class="title">行程审批</view>
				</view>
				<view class="box" @click="navigate('/pages/approval/list')">
					<image src="../../static/icon/33.png" mode="aspectFit" />
					</image>
					<view class="title">审批记录</view>
				</view>
			</view>
			<view style="background: #ffffff;margin-top: 20rpx;border-radius: 20rpx;padding: 20rpx 0;">
				<view class="btitle">巡边统计</view>
				<view class="box" @click="navigate('/pages/index/statistics?type=0')">
					<image src="../../static/icon/00.png" mode="aspectFit" />
					</image>
					<view class="title">累计巡边次数</view>
				</view>
				<view class="box" @click="navigate('/pages/index/statistics?type=1')">
					<image src="../../static/icon/99.png" mode="aspectFit" />
					</image>
					<view class="title">累计巡边时长</view>
				</view>
				<view class="box" @click="navigate('/pages/index/statistics?type=2')">
					<image src="../../static/icon/88.png" mode="aspectFit" />
					</image>
					<view class="title">累计巡边公里</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		data() {
			return {
				userInfo: [],
				helper: [],
			}
		},
		onLoad() {
			let token = helper.getUserToken();
			if (token == '') {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
			this.helper = helper;
		},
		onShow() {
			api.UserInfo().then(res => {
				console.log('user', res)
				this.userInfo = res.data;
				helper.setUser(res.data)
			})
		},
		methods: {
			getDevice(device){
				console.log(device)
				switch (device) {
					case '0':
						return '人员';
						break;
					case '1':
						return '车辆';
						break;
					case '2':
						return '移动设备';
						break;
				}
			},
			xuncha() {
				uni.navigateTo({
					url: '/pages/taxiService/inspections1'
				})
			},
			navigate(url) {
				console.log(url)
				uni.navigateTo({
					url: url,
					complete(res) {
						console.log(res)
					}
				})
			},
			tongzhi() {
				uni.switchTab({
					url: '/pages/mine/order'
				})
			},
			xc_jilu() {
				uni.navigateTo({
					url: '/pages/taxiService/record'
				})
			},
			task() {
				uni.navigateTo({
					url: '/pages/index/task'
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		width: 22%;
		display: inline-block;
		margin: 20rpx 10rpx;
		text-align: center;
	}

	.box image {
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 8rpx;


	}

	.title {
		/* margin-top:20rpx; */
		font-size: 24rpx;
	}

	.btitle {
		margin: 0 20rpx;
		font-size: 30rpx;
		border-bottom: 2rpx solid #f5f5f5;
		padding-bottom: 16rpx;
		margin-bottom: 12rpx;
	}

	.avatar {
		height: 140rpx;
		width: 140rpx;
		border-radius: 50%;
		border: 6rpx solid #ffffff;
		position: relative;
		bottom: 100rpx;
	}

	.top-card>view {
		line-height: 54rpx;
	}
</style>